<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>人力资源后台管理系统</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
    <style>
        #adminInfoDialog {
            padding: 20px;
            width: 400px;
            display: none; /*隐藏层*/
        }
        #userInfoDialog p {
            padding: 10px 0;
        }
    </style>


</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">管理员列表</div>
        <div class="layui-card-body">
            <table id="adminTable" lay-filter="test" ></table>
        </div>
    </div>
</div>

<script src="../res/layui/layui.js"></script>
<script>
    layui.use('table', function () {
        //表格工具
        let table = layui.table;
        //加载获取layer弹层模块
        let layer = layui.layer;
        //jquery
        let $ = layui.jquery;

        //第一个实例
        table.render({
            elem: '#adminTable'//绑定表格
            , height: 315,
            url: "http://localhost:8989/admin/list",   //服务端数据接口地址
            page: {          //设置分页参数
                limit: 5,    //每页数据条数
                limits: [3, 5, 7, 10], //页码选择列表
                theme: '#1E9FFF' //分页颜色主题
            }
            , cols: [[ //表头
                {field: 'id', title: 'ID', width: 80}
                , {field: 'username', title: '用户名', width: 80}
                , {field: 'sex', title: '性别'}
                , {field: 'salary', title: '薪资(单位/元)'}
                , {field: 'phone', title: '电话号码'}
                ,{fixed: 'right',title: '操作',  align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
            ]]
        });


        //监听表格工具栏事件
        //监听工具条
        table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if(layEvent === 'detail'){
                //查看功能
                //----------------显示一个弹出层-------------------------
                layer.open({
                    type: 1,     //设置弹层类型 1：页面层
                    content: $('#adminInfoDialog'),  // 使用dom节点作为弹层内容
                    shade: 0,  //去除遮罩
                    btn: ['确定'], //显示按钮
                    yes: function () { //按钮点击之后的回调
                        //关闭所有层
                        layer.closeAll();
                    },
                    success: function (layero, index) {  //当弹出层成功显示之后回调
                        layero.find('#username').text(data.username);
                        layero.find('#password').text(data.password);
                        layero.find('#addtime').text(data.addtime);
                        layero.find('#status').text('').html(data.status === 0 ? '正常' : '封禁')
                    }
                });
                //----------------显示一个弹出层-------------------------


            } else if(layEvent === 'del'){ //删除
                //删除功能
                //--------------------------------------------------
                layer.confirm('确认删除该管理员吗?', {icon: 3}, function () {
                    let index = layer.load(1);
                    $.get("http://localhost:8989/admin/delete?id="+ data.id, function (resp) {
                        layer.close(index);
                        if (resp.code === 0) {
                            layer.msg(resp.msg, function () {
                                //执行dom删除
                                obj.del();
                                //更新表格
                                table.reload('adminTable');
                            })
                        } else {
                            layer.msg(resp.msg);
                        }
                    })
                });

                //--------------------------------------------------
            } else if(layEvent === 'updateStatus'){
                //修改管理员状态功能
                //--------------------------------------------------
                //显示确认框
                layer.confirm('确认修改吗?', {icon: 3}, function () {
                    //对状态取反
                    data.status = data.status === 0 ? 1 : 0;
                    //显示加载层
                    let index = layer.load(1);
                    // 向后台发送ajax请求
                    $.ajax({
                        type: 'post',
                        url: "http://localhost:8989/admin/updateStatus",
                        contentType: "application/json",
                        data: JSON.stringify(data),
                        success: function (resp) {
                            //关闭加载层
                            layer.close(index);
                            if (resp.code === 0) {
                                layer.msg(resp.msg, function () {
                                    //刷新表格数据
                                    table.reload('adminTable');
                                });
                            } else {
                                layer.msg(resp.msg);
                            }
                        }
                    });
                });
                //--------------------------------------------------
            }
        });
    });
</script>

<script type="text/html" id="barDemo">
    <!--    <div class="layui-form" >-->
    <!--        <select lay-filter="demo-select-filter">-->
    <!--            <option value="">请选择</option>-->
    <!--            <option value="AAA">选项 A</option>-->
    <!--            <option value="BBB">选项 B</option>-->
    <!--            <option value="CCC">选项 C</option>-->
    <!--        </select>-->
    <!--    </div>-->

    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    {{# if(d.status === 0){ }}
    <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="updateStatus" data-status="1">
        <i class="layui-icon layui-icon-close-fill"></i>
        禁用
    </button>
    {{# }else{ }}
    <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="updateStatus" data-status="0">
        <i class="layui-icon layui-icon-ok-circle"></i>
        启用
    </button>
    {{# } }}

</script>

<!--点击详情按钮显示的对话框的内容-->
<div id="adminInfoDialog">
    <table class="layui-table">
        <tr>
            <td>用户名</td>
            <td><span id="username"></span></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><span id="password"></span></td>
        </tr>
        <tr>
            <td>添加时间</td>
            <td><span id="addtime"></span></td>
        </tr>
        <tr>
            <td>状态</td>
            <td><span id="status"></span></td>
        </tr>
    </table>
</div>
</body>
</html>